/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Upload, Grid, Form, Message } from '@alifd/next';
import './index.scss';
import request from '../../../../utils/request';
import { host, stringCheck } from '../../../../const';

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: { xxs: 6, s: 3, l: 3 },
    wrapperCol: { s: 12, l: 10 },
};


export default class CreateMapForm extends Component {
  static displayName = 'CreateMapForm';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
      super(props);
      this.state = {
          value: {
              name: '',
              remark: '',
              width: '',
              height: '',
          },
          imgInfo: null,
      };
  }


  formChange = (value) => {
      this.setState({ value });
  };

  uploadChange = (info) => {
      this.state.imgInfo = info[0];
      // 创建对象
      const first = info[0];
      if (first) {
          this.File2Base64(first.originFileObj);
      }
  }

   File2Base64=(file) => {
       const fr = new FileReader();
       // 如果下面的语句执行失败，需要放入 setTimeout 异步处理
       fr.readAsDataURL(file);
       fr.onload = (e) => {
           const base64 = e.target.result;// 
           this.getWH(base64);
       };
   }
   getWH=(base64) => {
       const img = new Image();
       img.src = base64;
       img.onload = () => {
       // 图片尺寸
           console.log(img.width, img.height);
           this.setState({
               value: {
                   ...this.state.value,
                   width: img.width,
                   height: img.height,
               },

           });
       };
   }


  submit = () => {
      if (stringCheck(this.state.value.name) == null) {
          Message.error('请输入名称');
          return;
      }

      if (this.state.imgInfo == null) {
          Message.error('请选择图片');
          return;
      }
      if (this.state.value.width == null) {
          Message.error('请输入图片长度');
          return;
      }
      if (this.state.value.height == null) {
          Message.error('请输入图片高度');
          return;
      }


      const formData = new FormData(); // 当前为空
      formData.append('file', this.state.imgInfo.originFileObj);
      formData.append('name', this.state.value.name);
      formData.append('width', this.state.value.width);
      formData.append('height', this.state.value.height);
      formData.append('remark', this.state.value.remark);

      request({
          method: 'POST',
          url: `${host}/map/indoor`,
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
          },
          timeout: '60000',
          data: formData,
      }).then((result) => {
          const res = result?.data;
          const code = result?.data?.code;
          if (code === 200) {
              Message.success(res.msg || '提交成功');
          } else {
              Message.error(res?.msg || '提交出错');
          }
      });
  }


  render() {
      return (
          <div className="settings-form">
              <IceContainer>
                  <Form value={this.state.value} field={this.field} onChange={this.formChange} ref="form">
                      <div style={styles.formContent}>
                          <h2 style={styles.formTitle}>创建室内地图</h2>

                          <FormItem
                              size="large"
                              label="名称："
                              {...formItemLayout}
                              maxLength={10}
                          >
                              <Input name="name" />
                          </FormItem>
                          <FormItem
                              label="图片："
                              {...formItemLayout}
                          >
                              <Upload.Card
                                  listType="card"
                                  limit={1}
                                  useDataURL
                                  autoUpload={false}
                                  accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
                                  onChange={this.uploadChange}
                                  onRemove={() => {
                                      this.setState({
                                          imgInfo: null,
                                          value: {
                                              ...this.state.value,
                                              width: '',
                                              height: '',
                                          },
                                      });
                                  }}
                              />
                          </FormItem>

                          <FormItem
                              size="large"
                              label="宽度："
                              {...formItemLayout}
                          >
                              <Input name="width" disabled value={this.state.value.width} placeholder="请选择图片" />
                          </FormItem>
                          <FormItem
                              size="large"
                              label="高度："
                              {...formItemLayout}
                          >
                              <Input name="height" disabled value={this.state.value.height} placeholder="请选择图片" />
                          </FormItem>

                          <FormItem
                              size="large"
                              label="备注："
                              {...formItemLayout}
                          >
                              <Input.TextArea name="remark" />
                          </FormItem>


                          <Row style={{ marginTop: 20 }}>
                              <Col offset="3">
                                  <Form.Submit
                                      size="large"
                                      type="primary"
                                      style={{ width: 100 }}
                                      onClick={this.submit}
                                  >
                    提 交
                                  </Form.Submit>
                              </Col>
                          </Row>
                      </div>
                  </Form>
              </IceContainer>
          </div>
      );
  }
}

const styles = {
    label: {
        textAlign: 'right',
    },
    formContent: {
        width: '100%',
        position: 'relative',
    },
    formItem: {
        alignItems: 'center',
        marginBottom: 25,
    },
    formTitle: {
        margin: '0 0 20px',
        paddingBottom: '10px',
        borderBottom: '1px solid #eee',
    },
};
